﻿<style>
    .margin {
        margin-left: 3px;
        padding: 5px;
    }
    .small {
        cursor: pointer;
        font-size: 12px;
    }
    .med {
        cursor: pointer;
        font-size: 20px;
    }
</style>
<table ng-table="bookTable" class="table">
    <tr ng-repeat="book in $data">
        <td data-title="'Cover'">
            <span class="thumbnail">
                <img ng-src="/book/image/{{book.id}}" width="200"/>
            </span>
        </td>
        <td data-title="'Title'" sortable="'title'">{{book.title}}</td>
        <td data-title="'Author(s)'" >
            <span class="label label-primary margin" ng-repeat="author in book.authors"> 
                {{author.Name}} {{author.LastName}} <span data-toggle="tooltip" data-placement="bottom" title="Click to remove author." class="glyphicon glyphicon-remove-circle small" ng-click="BookListCtrl.removeAuthor($index, book)"></span>
            </span>
        </td>
        <td data-title="'Pages'">{{book.pages}}</td>
        <td data-title="'Publisher'">{{book.publisher}}</td>
        <td data-title="'Year'" sortable="'year'">{{book.year}}</td>
        <td data-title="'ISBN'">{{book.isbn}}</td>
        <td data-title="''">
            <span title="Click to edit book." class="glyphicon glyphicon-edit med" data-toggle="modal" data-target="#bookEditFormDialog" ng-click="BookListCtrl.peekBook(book)"></span>
            <span title="Click to remove book." class="glyphicon glyphicon-remove med" ng-click="BookListCtrl.remove($index)"></span>
        </td>
    </tr>
</table>
<book-add-dialog></book-add-dialog>
<book-edit-dialog></book-edit-dialog>